
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:wangziyi_app/constans/toast.dart';
import 'package:wangziyi_app/widgets/banner.dart';
import 'package:wangziyi_app/main.dart';


class HomePage extends StatefulWidget {


  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  List tabs = [
    '首页',
    '男装',
    '洗护',
    '加装',
    '鞋靴',
    '数码',
    '百货',
    '食品',
    '美妆',
    '饰品',
    '箱包',
    '运动',
    '母婴',
    '车品',
    '保健',
    '手机',
    '内衣',
    '电器',
    '生鲜',
  ];
  List imgList = [
    "http://yanxuan.nosdn.127.net/65091eebc48899298171c2eb6696fe27.jpg",
    "http://yanxuan.nosdn.127.net/8b30eeb17c831eba08b97bdcb4c46a8e.png",
    "http://yanxuan.nosdn.127.net/a196b367f23ccfd8205b6da647c62b84.png",
    "http://yanxuan.nosdn.127.net/149dfa87a7324e184c5526ead81de9ad.png",
    "http://yanxuan.nosdn.127.net/88dc5d80c6f84102f003ecd69c86e1cf.png",
    "http://yanxuan.nosdn.127.net/8b9328496990357033d4259fda250679.png",
    "http://yanxuan.nosdn.127.net/c39d54c06a71b4b61b6092a0d31f2335.png",
    "http://yanxuan.nosdn.127.net/ee92704f3b8323905b51fc647823e6e5.png",
    "http://yanxuan.nosdn.127.net/e564410546a11ddceb5a82bfce8da43d.png",
    "http://yanxuan.nosdn.127.net/56f4b4753392d27c0c2ccceeb579ed6f.png",
    "http://yanxuan.nosdn.127.net/6a54ccc389afb2459b163245bbb2c978.png",
    'https://picsum.photos/id/101/548/338',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569842561051&di=45c181341a1420ca1a9543ca67b89086&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201504%2F17%2F20150417212547_VMvrj.jpeg',
    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1570437233&di=9239dbc3237f1d21955b50e34d76c9d5&imgtype=jpg&er=1&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201508%2F30%2F20150830095308_UAQEi.thumb.700_0.jpeg'
  ];
  List channelTitles=['子异超市','数码电器','子异服装','免费水果','一小时购','充值缴费','领豆豆','9.9包邮','领津贴','VIP会员',];
  List<BannerItem> bannerList = [];
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = null;
    // 创建Controller
    _tabController = TabController(length: tabs.length, vsync: this);
    BannerItem item=BannerItem.defaultBannerItem(""
        "https://img.alicdn.com/tfs/TB1wOidVWL7gK0jSZFBXXXZZpXa-520-280.jpg","");
    bannerList.add(item);
item=BannerItem.defaultBannerItem(
        "https://img.alicdn.com/imgextra/i3/6000000002315/O1CN01qTDT9N1SyJY1Ofm5a_!!6000000002315-2-octopus.png","");

    bannerList.add(item);item=BannerItem.defaultBannerItem(
        "https://aecpm.alicdn.com/imgextra/i3/370627083/O1CN01BP0FiU22C3zQc7Ev7_!!370627083-0-alimamazszw.jpg","");

    bannerList.add(item);


  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // elevation: 0,
        leading: Container(
          alignment: Alignment.center,
          child: Image.asset(
            "assets/images/saoyisao.png",
            height: 25,
            width: 25,
          ),
        ),
        title: Container(
          height: 40,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(25),
              border: Border.all(width: 2, color: Colors.white)),
          child: Row(
            children: [
              SizedBox(
                width: 10,
              ),
              Icon(
                Icons.search,
                textDirection: TextDirection.ltr,
              ),
              SizedBox(
                width: 8,
              ),
              Text('物理长高', textDirection: TextDirection.ltr),
              Expanded(child: SizedBox()),
              Icon(
                Icons.photo_camera_outlined,
              ),
              SizedBox(
                width: 10,
              ),
              MaterialButton(
                height: double.infinity,
                minWidth: 70,
                shape: RoundedRectangleBorder(
                    side: BorderSide.none,
                    borderRadius: BorderRadius.all(Radius.circular(25))),
                color: Colors.white,
                child: Text(
                  "搜索",
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
                ),
                onPressed: () {

                  sharedPreferences.then((value){
                    // print(value.get("themeColor"));
                    // MyToast().toast(value.toString());
                  });

                },
              )
            ],
          ),
        ),
        bottom: TabBar(
          controller: _tabController, // 记得要带上tabController
          isScrollable: true,
          tabs: tabs
              .map((e) => Tab(
                    text: e,
                  ))
              .toList(),
        ),
      ),
      body: TabBarView(
          controller: _tabController,
          children: tabs.map((e) {
            if(e=='首页'){

              return Column(
                children: [
                  BannerWidget(
                    200.0,bannerList,bannerPress: (pos,item){
                      print('点击了$pos');
                  },
                  ),

                   Container(
                     padding: EdgeInsets.all(10),
                    margin: EdgeInsets.all(15),
                    height: 150,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white
                    ),
                    child: GridView.builder(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 5,
                        crossAxisSpacing: 0,
                        childAspectRatio: 1,
                        mainAxisSpacing: 0
                    ), itemBuilder: (BuildContext context,int index){
                      return Container(
                        child: Column(
                          children: [
                            Icon(Icons.photo,color: Colors.grey,),
                            Text(channelTitles[index],textAlign: TextAlign.center,),
                          ],
                        ),
                      );
                    },itemCount: channelTitles.length,),
                  )
                ],
              ) ;

            }
            return StaggeredGridView.countBuilder(
              crossAxisCount: 4,
              itemCount: imgList.length,
                itemBuilder: (context,index){
                  String imgPath = imgList[index];
                  return new Material(
                      elevation: 8.0,
                      borderRadius: new BorderRadius.all(
                      new Radius.circular(8.0),
                  ),
                  child: new InkWell(
                  onTap: () {
                  Navigator.push(
                  context,
                  new MaterialPageRoute(
                  
                  ),
                  );
                  },
                  child: new Hero(
                  tag: imgPath,
                  child: Column(
                    children: [
                      CachedNetworkImage(
                      imageUrl: imgPath,
                      fit: BoxFit.fitWidth,
                      placeholder: (context, url) =>
                      Image.network(url),
                      ),
                      Text("加入购物车")
                    ],
                  ),
                  ),
                  ),);
            }, staggeredTileBuilder: (int index)=>StaggeredTile.fit(2),mainAxisSpacing: 8,crossAxisSpacing: 8,);
          }).toList()),
    );
  }

}
